<template>
    <div v-if="success">
        <img src="../assets/扫码/成功.png">
        <span>扫码成功！{{ second }}秒后跳转到页面...</span>
    </div>
    <div v-if="!success">
        <img src="../assets/扫码/失败.png">
        <span>跳转失败！请重新扫码！</span>
    </div>
</template>

<script setup>
import { useWebsocket } from "@/hooks";
import store from "@/store";
import { inject, onMounted, ref } from "vue";

const socket = useWebsocket(); //连接socket
const userData = store.state.userData;
const roomData = store.state.roomData;
const second = ref(3)
const success = ref(true)

onMounted(() => {
    navTo();
    setTimeout(() => {
        console.log('socket状态', store.state.socketState)
        if (!store.state.socketState) {
            success.value = !success.value
        }
    }, 2000)
})

function navTo() {
    const time = setInterval(() => {
        second.value--
        if (second.value == 0) {
            clearInterval(time)
            socket.send(JSON.stringify({
                userId: userData.userId,
                roomId: roomData.roomId,
                type: 'navToClass'
            }))
        }
    }, 1000);

}
</script>


<style scoped>
img {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 8rem;
    width: 8rem;
}

span {
    position: fixed;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
}
</style>